<template>
  <x-modal :visible.sync="show" width="600" @cancel="onChange">
    <view class="x-web-pay">
      <view class="_content">请确认微信支付是否已经完成？</view>
      <view class="_button">
        <view class="_confirm">
          <x-button round @click="onChange">已完成支付</x-button>
        </view>
        <view class="_cancel" @click="onChange">支付遇到问题，重新支付</view>
      </view>
    </view>
  </x-modal>
</template>

<script>
import XModal from '@/components/x-modal';
import XButton from '@/components/x-button';

export default {
  name: 'XWebPay',
  components: {
    XModal,
    XButton
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: this.visible
    };
  },
  computed: {},
  watch: {},
  created() {

  },
  methods: {
    onChange() {
      this.show = false;
      this.$emit('update:visible', false);
      this.$emit('change');
    }
  }
};
</script>

<style lang="scss">
  .x-web-pay{
    ._content{
      font-size: 32px; font-weight: bold; text-align: center; color: #333; padding: 50px 0; line-height: 1;
      text{ color: #F41D1D;}
    }
    ._button{ padding: 0 20px;}
    ._cancel{ text-align: center; font-size: 28px; color: #5B6A91; padding: 40px 0 20px;}
  }
</style>
